<template>
  <div>
    <a href="#" class="quit" @click="$router.go(-1)">返 回</a>
    <a-row>
      <a-col :span="12" class="leftSlider">
        <video id="videoElement" controls muted></video>
        <a-card title="评教选项">
          <a-card-grid
            v-for="(item, index) in patrolLabel"
            :key="index"
            style="width: 25%; text-align: center"
            @click="selectType(item)"
          >
            {{ item }}
          </a-card-grid>
        </a-card>
      </a-col>
      <a-col :span="11" class="rightSlider">
        <div class="font">
          {{ type }}
        </div>
        <div
          class="PatrolContent"
          v-for="(item, index) in filterQuestionList"
          :key="index"
        >
          <div class="question">
            {{ item.question }}
          </div>
          <a-radio-group v-model="item.answer">
            <a-radio
              v-for="(option, index) in item.options"
              :key="index"
              :value="option"
              class="option"
            >
              {{ option }}
            </a-radio>
          </a-radio-group>
        </div>
      </a-col>
    </a-row>
    <a-button class="submitPatrol"  @click="submitPatrol"> 提交评教 </a-button>
  </div>
</template>

<script>
import flvjs from "flv.js";
import axios from "@/utils/axios";
import { mapState } from "vuex";
//总分5分，算分公式 [( ∑ item.value/5 )/题目数量 ] * 100
export default {
  data() {
    return {
      type: "请选择评教选项",
      // 评教信息
      patrolLabel: [
        "言语技能评价",
        "讲解技能评价",
        "导入技能的评价",
        "提问技能的评价",
        "演示技能评价",
        "板书技能评价",
        "变化技能评价",
        "课堂结束技能评价",
        "课堂组织技能评价",
        "说课量化评价",
        "评课技能评价",
        "基层课堂教学评价",
      ],
      questionList: [
        {
          patrolType: "言语技能评价",
          message: [
            {
              question: "1、讲普通话，字音正确",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、语言流畅，语速、节奏恰当",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 语言准确，逻辑严密，条理清楚",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、 正确使用专业名词术语",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 语言简明、生动有趣",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、 遣词造句通俗易懂",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、 语调抑扬顿挫",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、 语言富有启发性",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、 没有不恰当的口头语和废话",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "10、体态语配合恰当",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "讲解技能评价",
          message: [
            {
              question: "1、 讲解传授的知识信息与本课题内容密切联系",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 描述、分析概念清楚",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 能创设情景，激起学生兴趣",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、 能启发学生思考，培养思维能力",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 采用相关的例子，类比等变化方法",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、 讲解内容、方法与学生认知水平相当",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、 声音清晰，语速适中，有感染力",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、 讲解用词语规范化，科学化",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、 与其他技能配合，能与学生呼应",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "10、注意来自学生的反馈，并及时反应调整",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "导入技能的评价",
          message: [
            {
              question: "1、 目的明确，能将学生导入课题情景",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 导入吸引了全班学生的注意力",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 导入的方法很有趣",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、 导入用的演示效果好",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 导入具有启发性",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、 导入内容与要研究的概念联系紧密",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、 教师的教态自然，语言清晰",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、 导入的时间掌握好",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、 导入能面向全班学生",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "提问技能的评价",
          message: [
            {
              question: "1、 提问的主题明确，与课题内容联系密切",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 问题的难易程度适合学生认知水平",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 提问有利于学生发展思维",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、 提问有层次，循序渐进",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 提问能复习旧知识，引出新课题",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、  提问能把握时机，促使学生思考",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、 提问后稍有停顿，给予思考时间",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、 对学生的回答善于应变及引导",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、 能适当启发提示，点拨思维",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "10、提问能得到反馈信息，促进师生交流",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "演示技能评价",
          message: [
            {
              question: "1、 演示的目的性介绍清晰扼要",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 演示现象明显，能吸引全班学生的注意力",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 演示中注重对学生观察与思维的引导",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、 操作演示动作科学、规范、有示范性",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 演示程序清楚，关键步骤能重复",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、  演示与讲解等其他技能结合自然",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、 演示开始时能将仪器交代清楚",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、 演示时机选择、时量控制合理",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、 演示安全可靠、效果明显、结论明确",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "10、对演示结果能实事求是地解释",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "板书技能评价",
          message: [
            {
              question: "1、 板书设计与教学内容紧密联系，结构合理",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 板书有条理，简洁",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 文字书写规范",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、板书大小适当，便于观看",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 板书配合讲解，富有表达力",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、  能激发学生的思维和兴趣",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、 应用了强化手段，突出重点（如彩笔、加强符号等）",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "变化技能评价",
          message: [
            {
              question: "1、 能引起注意，有导向性",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 能强化教学信息传递",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 能有效激发学生兴趣",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、声音节奏、强弱变化适当",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 手势、动作变化自然得体",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、  变化教学媒体，课堂生动活泼",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、师生相互作用变化",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、师生相互作用变化",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "课堂结束技能评价",
          message: [
            {
              question: "1、 能准确概括知识要点，并使知识系统化",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 结束时安排有学生活动（练习，提问，小结等）",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "3、 能有效地反馈教学效果，使学生对所学内容得到巩固、深化或运用，并能激发学生兴趣，引导学生进一步学习",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、有利于促进学生创造性思维",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 有效地组织和调动学生积极参与总结或练习",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、  教师语言干净利索，情绪饱满",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、结束布置的作业及活动明确且面对全体学生",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、结束环节时间掌握紧凑、不拖沓",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "课堂组织技能评价",
          message: [
            {
              question: "1、 语言恰当，要求明确，控制教学效果好",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 组织引导方法得当",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 能使学生始终处于积极状态",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、及时运用反馈，调整教学好",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 控制教学进度，时间掌握好",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、   组织管理中能体现尊重学生",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、组织教学的方式灵活多样",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、面对各种情况，善于应变",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、 处理少数和多数、个别和一般学生的策略方法切当",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "10、教学进程自然，师生相互合作好",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "说课量化评价",
          message: [
            {
              question: "1、 说明教学内容的地位和作用",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、 说明教学目标、要求及成因",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、 教学重、难点及其成因分析",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "4、阐述教法设计的理论依据和对激发兴趣、建构知识、培养能力、提高素质等方面的积极意义",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "5、 说明实验或现代教育手段在突出重点，突破难点上的作用和优势",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、说明教学反馈、控制与调节的措施及设计思想",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、能恰当分析学生的基础、能力、特点和素质",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、说明指导学生自我建构知识的措施、方法及成因",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、说明课堂引入的方式及其优越性",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "10、重点说明教学过程中的关键环节对启发思维、建构知识、培养能力、提高素质等方面的作用",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "11、说明教学过程对体现新课程理念，实现教学目标的作用和意义",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "12、教态端庄自然，语言简练生动，普通话准确且具有感染力；板书设计精炼、有条理，辅助教学操作熟练",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "13、教学设计有创新可加 1-3 分，但总分不得超过 100 分",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "评课技能评价",
          message: [
            {
              question: "1、 评课原则的掌握",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、客观公正，实事求是",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、理论联系实际，有理有据",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "4、语言精当，评议尺度适当",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、 发现问题并提出解决方法或建议，指导性强",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "6、兼顾整体，把握重点",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、评课量表的设计",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "8、指标体现评价目的",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、说明课堂引入的方式及其优越性",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "10、指标明确具体",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "11、分数权重分配合理",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
        {
          patrolType: "基层课堂教学评价",
          message: [
            {
              question:
                "1、教学目标合理，内容选择适当，教学有明确重点，符合课程标准的要求",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "2、符合学生的知识基础和能力水平面向全体学生",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "3、教师能根据实际学习情况调整授课速度及内容",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "4、注意直观，讲解结合，指导观察与思考教学方法配合体现重点灵活运用多种教学方法",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "5、将概念和技能充分应用于日常情况，联系学过的材料",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "6、教师的解释及指导均清楚并有系统语言规范、简练、流畅板书简要、工整、清晰、美观",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "7、抑扬顿挫、有激情",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question:
                "8、内容与科目相关且正确教师掌握正确的应用技能教师对学科的内容、应用及教学趋势有透彻的认识",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "9、教师教学投入、热情关系学生、有耐心",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "10、师生关系融洽",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "11、教师是指导者用建议的方式解决纪律问题",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "12、课堂气氛轻松活泼学生情绪高涨，兴趣盎然",
              options: ["好", "中", "差"],
              answer: "",
            },
            {
              question: "13、活动的转换井然有序",
              options: ["好", "中", "差"],
              answer: "",
            },
          ],
        },
      ],
      filterQuestionList: [],
      // 辅助信息
      EnglishOptions: ["A", "B", "C", "D", "E", "F", "G"],
    };
  },
  computed: {
    ...mapState({
      userId: (state) => state.public.uid,
    }),
  },
  mounted() {
    this.pullVideoStream();
  },
  methods: {
    selectType(item) {
      this.type = item;
      this.filterQuestionList = this.questionList.filter((question) => {
        return question.patrolType == item;
      });
      if (this.filterQuestionList.length != 0) {
        this.filterQuestionList = this.filterQuestionList[0].message;
      }
      // 强制渲染
      this.$forceUpdate();
    },
    pullVideoStream() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        let roomNumber = this.$route.query.roomNumber;
        var flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          hasVideo: true,
          hasAudio: true,
          url: `${this.$URLS.liveServer}/live?port=1935&app=live&stream=${roomNumber}`,
        });
        this.player = flvPlayer;
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        // play | pause
        flvPlayer.play();
      } else {
        alert(
          `您的浏览器不支持视频流播放\n建议使用 Chrome、FireFox 等主流浏览器`
        );
      }
    },
    async submitPatrol() {
      console.log(this.questionList);
      let lessonId = this.$route.query.lessonId;
      let userId = this.userId;
      let requestBody = {
        lessonId,
        userId,
        patrolMessage: this.questionList,
      };
      let url = "pc/v1/patrol";
      try {
        let { data } = await axios.post(url, requestBody);
        console.log(
          "🚀 ~ file: patrolDetailed.vue ~ line 797 ~ submitPatrol ~ data",
          data
        );
      } catch (err) {
        this.$message.error("请求错误！请重试");
        console.log(err);
      }
    },
  },
};
</script>

<style scoped>
.quit {
  left: 100px;
}
.leftSlider {
  margin-left: 1%;
}
.rightSlider {
  margin-left: 1%;
  border: 1px solid rgb(231, 229, 229);
}
#videoElement {
  width: 100%;
  min-height: 300px;
}
.PatrolContent {
  padding: 4px;
}
.question {
  margin-left: 10px;
  font-size: 18px;
}
.option {
  margin-left: 10px;
  width: 100px;
  font-size: 16px;
}
.font {
  text-align: center;
  padding: 7px;
  font-size: 22px;
}

.submitPatrol {
  margin: 10px auto;
  margin-right: 10px;
}
</style>
